<template>
  <view class="demo">
	  <view style="position: relative;">
		  <uni-easyinput v-model="inputValue" @input="onInput" :inputStyle="inputStyle"  >
		      
		     </uni-easyinput>
			 <!-- 使用 v-if 来控制是否显示联想提示框 -->
		  <view v-if="suggestions.length" class="suggestion-list">
			<!-- 遍历 suggestions，为每个联想项创建一个按钮 -->
			<button v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
			  {{ item }}
			</button>
		  </view>
	  </view>
     
		
  </view>
</template>

<script>
export default {
  data() {
    return {
      suggestions: ['姓名', '年龄', '性别', '123456', '12syg'],
		inputValue:'',
		inputStyle: { // 输入框样式
		        'padding-bottom': '50px' // 为联想提示框预留空间
		      }
    };
  },
  
  methods: {
	  onInput(e) {
		  console.log(e)
		  // 输入时触发联想功能
		  this.fetchSuggestions(e);
		},
		fetchSuggestions(query) {
		  // 模拟发起请求获取联想数据
		  setTimeout(() => {
			this.suggestions = this.suggestions.filter(item => item.includes(query));
		  }, 300);
		},
		selectSuggestion(item) {
		  // 选择联想项后，将值填充到输入框并隐藏联想提示框
		  this.inputValue = item;
		  this.suggestions = [];
		} 
   },
};
</script>
<style scoped >
	.demo{
		height: 100vh;
	}
	.suggestion-list {
	  position: absolute;
	  height: 200px;
	  width: 100%;
	  top: 30px;
	  left: 0;
	  background-color: red;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	 
	.suggestion-list button {
	  width: 100%;
	  padding: 10px;
	  box-sizing: border-box;
	  background-color: transparent;
	  border: none;
	  outline: none;
	  cursor: pointer;
	}
	 
	.suggestion-list button:hover,
	.suggestion-list button:focus {
	  background-color: #f0f0f0;
	}
</style>